<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/cellular_setup_icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="base-page">
  <template>
    <style include="iron-positioning">
      :host {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      #title {
        color: var(--cros-text-color-primary);
        font-weight: normal;
        line-height: 24px;
      }

      #message {
        height: var(--base-page-message-height, auto);
        margin-bottom: 20px;
      }

      :host ::slotted([slot='page-body']) {
        display: block;
        flex: 1 1 auto;
      }

      #message iron-icon {
        padding-inline-end: 4px;
      }
    </style>
    <template is="dom-if" if="[[isTitleShown_(title)]]" restamp>
      <h3 id="title">[[getTitle_(title)]]</h3>
    </template>
    <div id="message" aria-live="polite" aria-atomic="true">
      <iron-icon
          icon$="cellular-setup:[[messageIcon]]"
          hidden$="[[!isMessageIconShown_(messageIcon)]]">
      </iron-icon>
      [[message]]
    </div>
    <slot name="page-body"></slot>
  </template>
  <script src="base_page.js"></script>
</dom-module>
